<template>
  <div class="x6-graph-wrap">
    <div class="x6-graph-tools">
      <div>
        <span style=" display: inline-block; width: 88px">
        Connector:
        </span>
        <a-radio-group
            onChange= "onConnectorChange"
            value={this.state.connector}
        >
          <radio-button value="narmal">Normal</radio-button>
          <radio-button
              value="smooth"
              disabled="this.state.router !== 'none'"
          >
          Smooth
          </radio-button>
          <radio-button value="rounded">Rounded</radio-button>
        </a-radio-group>
      </div>
      <div style="padding: 16px 0">
      <span style="display:inline-block;width: 88px">Router:</span>
      <radio-group
          onChange="onRouterChange"
          value={this.state.router}
      >
        <radio-button value="none">None</radio-button>
        <radio-button value="orth">Orthogonal</radio-button>
        <radio-button value="manhattan">Manhattan</radio-button>
        <radio-button value="metro">Metro</radio-button>
      </radio-group>
    </div>
  </div>
  <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph, Edge, EdgeView } from '@antv/x6'
import '../index.less'
export default defineComponent({
  name: "index",
  data(){
    const edge: any=undefined;
    return{
      router: 'manhattan',
      connector: 'rounded',
      edge:edge
    }
  },
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLElement,
      width: 1000,
      height: 600,
    })

    const source = graph.addNode({
      shape: 'rect',
      position: { x: 50, y: 50 },
      size: { width: 140, height: 70 },
      attrs: {
        body: {
          fill: {
            type: 'linearGradient',
            stops: [
              { offset: '0%', color: '#f7a07b' },
              { offset: '100%', color: '#fe8550' },
            ],
            attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
          },
          stroke: '#ed8661',
          strokeWidth: 2,
        },
        label: {
          text: 'Source',
          fill: '#f0f0f0',
          fontSize: 18,
          fontWeight: 'lighter',
          fontVariant: 'small-caps',
        },
      },
    })

    const target = source
        .clone()
        .translate(750, 400)
        .setAttrByPath('label/text', 'Target')

    graph.addNode(target)

    this.edge = graph.addEdge({
      source,
      target,
      router: { name: this.router },
      connector: { name: this.connector },
      attrs: {
        connection: {
          stroke: '#333333',
          strokeWidth: 3,
        },
      },
    })

    const obstacle = source
        .clone()
        .translate(300, 100)
        .setAttrs({
          label: {
            text: 'Obstacle',
            fill: '#eee',
          },
          body: {
            fill: {
              stops: [{ color: '#b5acf9' }, { color: '#9687fe' }],
            },
            stroke: '#8e89e5',
            strokeWidth: 2,
          },
        })

    const update = () => {
      const edgeView = graph.findViewByCell(this.edge) as EdgeView
      edgeView.update()
    }

    obstacle.on('change:position', update)

    graph.addNode(obstacle)
    graph.addNode(obstacle.clone().translate(200, 100))
    graph.addNode(obstacle.clone().translate(-200, 150))

    // graph.on('edge:mouseenter', ({ cell, view }) => {
    //   if (cell) {
    //     console.log(cell.toJSON())
    //     view.addTools({
    //       tools: [
    //         {
    //           name: 'vertices',
    //           args: {
    //             snapRadius: 0,
    //             redundancyRemoval: false,
    //           },
    //         },
    //         {
    //           name: 'segments',
    //           args: { stopPropagation: false },
    //         },
    //       ],
    //       name: 'onhover',
    //     })
    //   }
    // })

    // graph.on('edge:mouseleave', ({ view }) => {
    //   if (view.hasTools('onhover')) {
    //     view.removeTools()
    //   }
    // })
  },
  methods:{
    onRouterChange (e: any){
      const router = e.target.value
      this.router = router
      if (router === 'none') {
        this.edge.removeRouter()
      } else {
        this.edge.setRouter(router)
      }
    },

    onConnectorChange(e: any){
      const connector = e.target.value
      this.connector = connector
      if (connector === 'narmal') {
        this.edge.removeConnector()
      } else {
        this.edge.setConnector(connector)
      }
    }
  }
})
</script>

<style scoped>

</style>
